import { Grid, SearchBar, SideBar } from 'antd-mobile'
import React, { useEffect, useState, useMemo, useCallback } from 'react'
import style from './index.less'
import { areaList } from '@vant/area-data'
import classnames from 'classnames'
import { tabsType, tabThird, getList } from '@/services/caig'
type Props = {
    showSearch?: boolean;
    onConfirm?: (data: any) => void;
    // onCooop?: (data: any) => void;
}
interface dataDto {
    id: number;
    menuName: string;
    text: string;
    list: []
}


export default (props: Props) => {

    const { showSearch, onConfirm } = props;
    const [tabs, setTabs] = useState<dataDto[]>([])
    const [tabsThird, setTabsThird] = useState<dataDto[]>([])
    const [tabsThree, setTabsThree] = useState([])
    const [searchActive, setSearchActive] = useState<boolean>(false);
    const [name, setName] = useState<string | number>()
    const [searchValue, setSearchValue] = useState('');
    const [listData, setListData] = useState([])
    const [species, setSpecies] = useState([])
    const [yiji, setyiji] = useState<string>('')
    const [selectedValue, setSelectedValue] = useState<string>();
    //获取输入框值,并执行查询
    const handleInputChange = (value: string) => {
        setSearchValue(value)
        setTimeout(async () => {
            const res = await getList(value)
            setListData(res)
        }, 500)
    }

    //获取一级菜单
    const getDataFirst = async () => {
        const res = await tabsType()
        setTabs(res)
        console.log(res);

    }
    //获取二级、三级菜单
    const getDataThird = async (name: string) => {
        const res = await tabThird(name)
        setTabsThird(res)
        console.log(res);
        setTabsThree(res[name].list)
    }
    const handleMenuClick = (value: []) => {
        setSpecies(value);
        console.log(value);
        onConfirm && onConfirm([yiji, value])
    };

    useEffect(() => {
        getDataFirst()
    }, [name])

    //获取省市，种类选择的值
    const handleChange = (values: string) => {
        console.log(values.split('-')[1]);
        setyiji(values.split('-')[1]);
        setName(values)
        { showSearch ? (getDataThird(values.split('-')[0])) : null }
    }
    //输入框点击变换界面样式
    const onSearchFocus = useCallback(() => {
        setSearchActive(true);
    }, []);

    return (
        <div className={style['top-list']}>
            {showSearch ? (
                <SearchBar
                    placeholder='请输入关键字'
                    onChange={handleInputChange}
                    showCancelButton
                    value={searchValue}
                    onCancel={() => setSearchActive(false)}
                    onFocus={onSearchFocus}
                    className={style.search}
                />
            ) : null}
            {searchActive ? (
                <div className={style.select}>
                    {searchValue.length > 0 ? (
                        <div className={style['select-item']}>
                            {listData?.map((item) => (
                                <div key={item.id} >
                                    {item.name}
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div>暂时没有匹配道搜索结果</div>
                    )}
                </div>
            ) : (
                <div className={style.container}>
                    <div className={style.aa}>
                        <SideBar
                            onChange={handleChange}
                            className={classnames(style.side, {
                                [style.width]: true !== showSearch
                            })}

                        >
                            {showSearch ? (tabs.map((item) => (
                                <SideBar.Item
                                    key={`${item.id}-${item.menuName}`}
                                    title={item.menuName}



                                />
                            )))
                                :
                                null
                            }

                        </SideBar>
                    </div>

                    <div className={style.main}>
                        {showSearch ? (tabsThird?.map((menu) => (
                            <div
                                key={menu.id}
                                className={classnames(style.city, { [style.selected]: selectedValue === menu.menuName })}

                            >
                                <div className={style.menuThird}>{menu?.menuName}</div>
                                <Grid columns={3} gap={8}>
                                    {tabsThree?.map((item) => (
                                        <Grid.Item key={item.id}
                                            className={classnames(style.grid, { [style['grid-select']]: species === item.menuName })}
                                            onClick={() => handleMenuClick(item.menuName)}
                                        >
                                            <div>{item.menuName}</div>
                                        </Grid.Item>
                                    ))}
                                </Grid>
                            </div>
                        )))
                            :
                            null
                        }
                    </div>
                </div>
            )}


        </div>
    )
}